<template>
    <!--
	规格弹窗 说明 此组件为规格展示与交互组件，用于快速下单商品多规格显示，商品详情页面规格显示
      props：
        data      ———— 商品信息
        pageType  ———— 页面类型(quickPlaceOrder,detail)
      method：
        closePopup  ———— 关闭弹窗
        addCart     ———— 加购物车
        buyNow      ———— 直接购买
   -->
    <view class="popup-content paddingBottomBar">
        <uni-icons class="icon-close" size="48" type="closeempty" @click="closePopup"></uni-icons>
        <scroll-view scroll-y="true">
            <view class="">
                <view class="sku-top">
                    <image
                        v-if="!getAppSet().isHideImg"
                        class="product-img"
                        :src="easyGetImgUrl(changeData.ProductImage)"
                        mode="aspectFill"></image>
                    <view class="product-detail">
                        <view class="product-name text-show-line-1">{{ changeData.ProductName }}</view>
                        <view class="price-box">
                            <text class="price-text">￥</text>
                            <text class="price-text">{{ changeData.Price }}</text>
                            <text class="">/</text>
                            <text>件</text>
                        </view>
                        <text class="num-title" v-if="changeData.LimitBuy > 0">限购：{{ changeData.LimitBuy }}件</text>
                    </view>
                </view>
                <view class="sku-unit" v-if="changeData.AttrList.length">
                    <view class="unit-title"><text>单位</text></view>
                    <view class="unit-items">
                        <view
                            v-for="(item, index) in changeData.AttrList[0].Values"
                            :key="index"
                            class="btn btn-gray-fill"
                            :class="activeUnitIndex == index ? 'btn-success-fill' : ''"
                            @click="changeUnit(index)">
                            {{ item.ValueStr }}
                        </view>
                    </view>
                </view>

                <view class="sku-unit">
                    <view>
                        <view class="batch-num-box">
                            <text class="batch-num-title">购买数量</text>
                            <view class="input-number-box">
                                <button
                                    class="btn-minus num-btn"
                                    :class="model.amount <= 0 ? 'color-shadow' : ''"
                                    @click="changeAmount(model.amount - 1)">
                                    -
                                </button>
                                <view class="btn-input-box">
                                    <input
                                        v-model="model.amount"
                                        maxlength="6"
                                        type="digit"
                                        class="btn-input"
                                        @blur="changeAmount(model.amount)" />
                                </view>
                                <button class="btn-plus num-btn" @click="changeAmount(model.amount + 1)">+</button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="bottom-bar no-shadow" v-if="!isBatch">
            <view class="btn btn-success btn-fill btn-addCart" @click="addCart"> 立即购买 </view>
        </view>
    </view>
</template>

<script>
import { updateCart } from "@/utils/cartUtil.js"
import { upTempCartFn } from "@/utils/tempCartUtil.js"
import { setReduce } from "@/utils/utils.js"
import { CheckBuySeckill } from "@/service/api/seckill.js"
import specTree from "@/components/product/spec-tree.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import numPopup from "@/components/order/num-popup.vue"
export default {
    name: "ProductSpec",
    components: {
        specTree,
        numPopup,
    },
    props: {
        data: {
            // 数据
            type: Object,
            required: true,
        },
        fresh: {
            type: Boolean,
            required: false,
            default: false,
        },
        pageType: {
            // 按钮类型
            type: String,
            required: false,
            default: "quickPlaceOrder",
        },
        tempType: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            changeData: {},
            activeUnitIndex: -1,
            activeUnitName: "",
            activeUnitRatio: 1,
            activeSpecIndex: -1,
            secondSpecList: [],
            cartRequestObj: [],
            ProductSkuAttrList: [],
            V_GradePrice: "",
            LimitBuy: 0,
            // guige
            activeIndex: 0,
            activeId: 0,
            classifyList: [],
            //是否是单规格
            isSingle: false,
            // 批量加购
            isBatch: false,
            batchData: [],
            batchInfo: [],
            cartBatchRequestList: [],
            allSkuModel: [],
            model: {
                amount: 1,
            },
        }
    },
    watch: {
        data(newVal, oldVal) {
            this.init()
        },
        fresh(newVal, oldVal) {
            this.init()
        },
        cartRequestList(e) {},
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            const _this = this
            this.activeUnitIndex = -1
            this.activeUnitName = ""
            this.activeUnitRatio = 1
            this.activeSpecIndex = -1
            this.secondSpecList = []
            this.cartRequestList = []

            this.batchData = []
            this.changeData = this.data
            //单个sku
            if (this.changeData.SkuId) {
                this.model.skuId = this.changeData.SkuId
                this.model.displayAttribute = this.changeData.DisplayAttribute || "无规格"
            }
            //获取所有属性
            // 初始化批量加购设置
            this.LimitBuy = this.changeData.LimitBuy
        },
        // 关闭弹窗
        closePopup() {
            this.$emit("closePopup")
        },
        // 批量方法
        changeAmount(amount) {
            if (amount < 1) {
                this.model.amount = 1
                return
            }
            if (this.changeData.LimitBuy && this.changeData.LimitBuy != "0" && amount > this.changeData.LimitBuy) {
                this.model.amount = this.changeData.LimitBuy
                return
            }
            this.model.amount = amount
            this.$forceUpdate()
        },
        chooseSpec(item, index, ite, inde, batchItem) {
            ite.Selected = !ite.Selected
            this.$forceUpdate()
        },

        //选择规格
        changeUnit(index) {
            this.activeUnitIndex = index
            var sku_str =
                this.changeData.AttrList[0].AttributeName +
                "_" +
                this.changeData.AttrList[0].Values[index].ValueStr +
                ";"
            var sku = this.changeData.SkuList.find(function (item) {
                return item.AttributeNameValue == sku_str
            })
            if (sku) {
                this.model.skuId = sku.ID
                this.model.displayAttribute = sku.AttributeNameValue.replace(/_/g, ":").replace(/;/g, ",")
            }
        },
        addCart() {
            if (!this.model.skuId) {
                this.easyToast("请选择商品规格")
                return
            }
            if (this.model.amount < 0) {
                this.easyToast("请选择购买数量")
                return
            }
            let parm = {
                activityId: this.changeData.ActivityId,
                skuId: this.model.skuId,
                amount: this.model.amount,
            }
            CheckBuySeckill(parm).then((res) => {
                if (res.State == 1) {
                    this.easyGoTo(
                        "/pages_shop/packet/order/submitSeckillOrder?activityId=" +
                            parm.activityId +
                            "&skuId=" +
                            parm.skuId +
                            "&amount=" +
                            parm.amount,
                    )
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.icon-close {
    position: fixed;
    top: $app-page-padding;
    right: $app-page-padding;
    z-index: 1;
}
// 弹窗组件
.popup-content {
    display: flex;
    position: relative;
    background: $color-white;
    border-radius: 40rpx 40rpx 0 0;
    padding-top: 20rpx;
    max-height: 60vh;
    z-index: 0;

    .sku-top {
        display: flex;
        flex-direction: row;
        padding: $app-page-padding;

        .product-img {
            width: 200rpx;
            height: 200rpx;
            margin-right: 20rpx;
            border-radius: 8rpx;
        }

        .product-detail {
            display: flex;
            flex: 1;
            flex-direction: column;

            .price-box {
                display: flex;
                flex: 1;
                align-items: center;
            }

            .other {
                display: flex;
                flex-direction: column;

                text {
                    margin-top: 20rpx;
                }
            }

            .price-text {
                font-size: $font-size-36;
                color: $color-orange-1;
                font-weight: 600;
            }
        }
    }

    .sku-unit {
        padding: $app-page-padding;

        .sku-unit-header {
            display: flex;
            flex-direction: row;

            .unit-title {
                flex: 1;
            }

            .batch-check-box {
                display: flex;
                flex-direction: row;
                align-items: center;

                .batch-text {
                    margin-right: 10rpx;
                }

                .select-box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 24rpx;
                    height: 24rpx;
                    border: solid 1rpx $app-color-text-tip;
                    border-radius: 4rpx;
                }

                .selected {
                    border-color: $color-yellow-4;
                }
            }
        }

        .unit-items {
            display: flex;
            flex-direction: row;
            margin: 20rpx 0;

            .btn {
                min-width: 60rpx;
                border-radius: $border-radius-10;
                margin-right: 20rpx;
            }
        }
    }

    .bottom-bar {
        .btn {
            text-align: center;
            line-height: 86rpx;
            height: 86rpx;
            font-size: 32rpx;
            &:first-child {
                margin-left: 0;
            }
        }

        .btn-batch {
            flex: 1;
            border: solid 1rpx $color-black-1;
        }

        .btn-addCart {
            flex: 3;
        }
    }
}

.batch-num-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: solid 1rpx $app-color-input-bg;
    padding-top: $app-page-padding;
    .batch-num-title {
        display: flex;
        flex: 1;
        font-size: 30rpx;
    }
    .num-title {
        display: flex;
        flex: 1;
    }

    .num-btn {
        display: flex;
        justify-content: center;
        align-items: center;

        &:after {
            border: 0 !important;
        }
    }
}
.product-name {
    font-size: 32rpx;
    color: $color-gray-1;
    font-weight: bold;
}
</style>
